<template>
  <div class="app-container">
    <el-card class="box-card" shadow="always">
      <div slot="header" class="clearfix">
        <el-form ref="queryForm" :model="queryParams" :inline="true" class="form-inline">
          <el-form-item label="任务名称" prop="jobName">
            <el-select v-model="queryParams.checkJobId" class="filter-item" placeholder="请选择任务" @change="choseTask">
              <el-option v-for="(item, index) in list" :key="index" :label="item.jobName" :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="时间">
            <el-date-picker v-model="queryParams.checkDate" type="date" :clearable="false" format="yyyy-MM-dd" value-format="yyyy-MM-dd" :picker-options="pickerOption" placeholder="选择日期" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" :disabled="isbool" icon="el-icon-download" @click="handleDown">下载问题数据</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-waves class="filter-item" icon="el-icon-refresh" @click="handleRest">{{ $t('table.rest') }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="body-wrapper">
        <h4 style="text-align: center">{{ date }}质量分析报告</h4>
        <el-divider content-position="left">
          <h3>错误量统计分析</h3>
        </el-divider>
        <el-row :gutter="20">
          <el-col :span="10">
            <h5>按数据源统计错误数量</h5>
            <el-table :data="reportTableData1" :span-method="objectSpanMethod1" border tooltip-effect="dark" :max-height="250" style="width: 100%; margin: 15px 0">
              <el-table-column prop="sourceName" label="数据源" align="center" />
              <el-table-column prop="levelName" label="规则级别" align="center" />
              <el-table-column prop="checkErrorCount" label="不合规数" align="center">
                <template slot-scope="scope">
                  <el-progress :percentage="scope.row.checkErrorCount" :stroke-width="20" :text-inside="true" :color="colorFormat(scope.row.levelName)" :format="cellFormat" />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col :span="10" :offset="4">
            <h5>按规则类型统计错误数量</h5>
            <el-table :data="reportTableData2" :span-method="objectSpanMethod2" border tooltip-effect="dark" :max-height="250" style="width: 100%; margin: 15px 0">
              <el-table-column prop="ruleName" label="规则名称" align="center" />
              <el-table-column prop="ruleTypeName" label="规则类型" align="center" />
              <el-table-column prop="checkErrorCount" label="不合规数" align="center">
                <template slot-scope="scope">
                  <el-badge :value="scope.row.ruleTypeName" :type="typeFormat(scope.row.ruleTypeName)">
                    {{ scope.row.checkErrorCount }}
                  </el-badge>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-divider content-position="left">
          <h3>规则类型统计分析</h3>
        </el-divider>
        <el-row v-for="(value, key) in detailData" :key="key">
          <el-col :span="24">
            <h5>{{ key }}</h5>
            <el-table :data="value" border tooltip-effect="dark" :max-height="250" style="width: 100%; margin: 15px 0">
              <el-table-column prop="ruleName" label="规则名称" align="center" />
              <el-table-column prop="sourceName" label="数据源" align="center" />
              <el-table-column prop="tableComment" label="数据表(中文)" align="center" />
              <el-table-column prop="tableName" label="数据表(英文)" align="center" />
              <el-table-column prop="columnComment" label="核查字段(中文)" align="center" />
              <el-table-column prop="columnName" label="核查字段(英文)" align="center" />
              <el-table-column prop="checkTotalCount" label="核查数" align="center" />
              <el-table-column prop="checkErrorCount" label="不合规数" align="center" />
            </el-table>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getReportBySource, getReportByType, getReportDetail, getReportDown } from '@/api/report/checkreport'
import { fetchmetadataJobList } from '@/api/job/metadataJob'

export default {
  name: 'CheckReport',
  data() {
    return {
      queryParams: {
        checkDate: this.$moment(this.$moment().add(0, 'days').startOf('day').valueOf()).format('YYYY-MM-DD'),
        checkJobId: '',
      },
      pickerOption: {
        disabledDate(date) {
          return date.getTime() > Date.now()
        },
      },
      isbool: false,
      date: this.$moment().subtract('days', 1).format('YYYY年MM月DD日'),
      spanArr1: [],
      position1: 0,
      reportTableData1: [],
      spanArr2: [],
      position2: 0,
      reportTableData2: [],
      detailData: {},
      // 唯一性核查数据
      uniqueTableData: [],
      // 完整性核查数据
      integrityTableData: [],
      // 准确性核查数据
      accuracyTableData: [],
      // 一致性核查数据
      consistentTableData: [],
      // 关联性核查数据
      relevanceTableData: [],
      // 及时性核查数据
      timelinessTableData: [],
      listQuery: {
        pageNum: 1,
        pageSize: 999,
        limit: 999,
      },
      list: [],
      fileName: '',
    }
  },
  created() {
    this.getListData()
  },
  methods: {
    choseTask(e) {
      this.list.forEach((item) => {
        if (item.id == e) {
          this.fileName = item.fileName
        }
      })
    },
    //重置
    handleRest() {
      this.listQuery = {
        page: 1,
        limit: this.$store.getters.defaultPageSize,
      }
      this.getListData()
    },
    handleDown() {
      if (this.fileName === '') {
        this.$message.warning('请选择任务名称')
      } else {
        if (this.fileName === null) {
          this.$message.warning('暂无问题数据文件')
        } else {
          getReportDown(this.fileName).then((res) => {
            if (res.data.code == 200) {
              const objectUrl = res.data.data
              const link = document.createElement('a')
              // // 设置导出的文件名称
              link.download = `治理规范` + '.xlsx'
              link.style.display = 'none'
              link.href = objectUrl
              link.click()
              document.body.appendChild(link)
            } else {
              this.$message.error(res.data.msg)
            }
          })
        }
      }
    },
    getListData() {
      fetchmetadataJobList(this.listQuery).then((response) => {
        if (response.data.code == 200) {
          this.list = response.data.data.rows
          if (this.list == []) {
            this.isbool = true
          }
          this.queryParams.checkJobId = response.data.data.rows[0].id
          this.handleQuery()
          this.choseTask(this.queryParams.checkJobId)
        } else {
          this.$message.error(response.data.msg)
        }
      })
    },
    handleQuery() {
      this.getReportData1()
      this.getReportData2()
      this.getReportData3()
      this.date = this.$moment(this.queryParams.checkDate).format('YYYY年MM月DD日')
    },
    getReportData1() {
      getReportBySource({ checkDate: this.queryParams.checkDate, checkJobId: this.queryParams.checkJobId }).then((response) => {
        if (response.data.code == 200) {
          response.data.data.forEach((item) => {
            this.dictList('level').forEach((ite) => {
              if (item.ruleLevel == ite.value) {
                item.levelName = ite.label
              }
            })
          })
          this.reportTableData1 = response.data.data
          this.rowspan1()
        }
      })
    },
    getReportData2() {
      getReportByType({ checkDate: this.queryParams.checkDate, checkJobId: this.queryParams.checkJobId }).then((response) => {
        if (response.data.code == 200) {
          response.data.data.forEach((item) => {
            this.dictList('quality_rule_type').forEach((ite) => {
              if (item.ruleLevel == ite.value) {
                item.ruleTypeName = ite.label
              }
            })
          })
          this.reportTableData2 = response.data.data
          this.rowspan2()
        }
      })
    },
    rowspan1() {
      this.reportTableData1.forEach((item, index) => {
        if (index === 0) {
          this.spanArr1.push(1)
          this.position1 = 0
        } else {
          if (this.reportTableData1[index].sourceId === this.reportTableData1[index - 1].sourceId) {
            this.spanArr1[this.position1] += 1
            this.spanArr1.push(0)
          } else {
            this.spanArr1.push(1)
            this.position1 = index
          }
        }
      })
    },
    objectSpanMethod1({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr1[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    rowspan2() {
      this.reportTableData2.forEach((item, index) => {
        if (index === 0) {
          this.spanArr2.push(1)
          this.position2 = 0
        } else {
          if (this.reportTableData2[index].ruleType === this.reportTableData2[index - 1].ruleType) {
            this.spanArr2[this.position2] += 1
            this.spanArr2.push(0)
          } else {
            this.spanArr2.push(1)
            this.position2 = index
          }
        }
      })
    },
    objectSpanMethod2({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        const _row = this.spanArr2[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col,
        }
      }
    },
    colorFormat(level) {
      if (level === '低') {
        return '#409eff'
      } else if (level === '中') {
        return '#e6a23c'
      } else {
        return '#f56c6c'
      }
    },
    cellFormat(percentage) {
      console.log(percentage, 'percentage')
      return `${percentage}`
    },
    typeFormat(level) {
      if (level === '低') {
        return 'primary'
      } else if (level === '中') {
        return 'warning'
      } else {
        return 'danger'
      }
    },
    getReportData3() {
      getReportDetail({ checkDate: this.queryParams.checkDate, checkJobId: this.queryParams.checkJobId }).then((response) => {
        if (response.data.code == 200) {
          this.detailData = response.data.data
          // this.uniqueTableData = response.data.additionalProp1
          // this.integrityTableData = response.data.additionalProp2
          // this.accuracyTableData = response.data.additionalProp3
          // this.consistentTableData = response.data.consistent
          // this.relevanceTableData = response.data.relevance
          // this.timelinessTableData = response.data.timeliness
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.el-card ::v-deep .el-card__body {
  height: calc(100vh - 230px);
  overflow-y: auto;
}

.form-inline {
  ::v-deep .el-form-item {
    margin-bottom: 0px;
  }
}

::v-deep .el-badge__content {
  margin-top: 10px;
  right: 0px;
}

::v-deep .el-table__header th {
  background-color: #f5f5f5 !important;
}
</style>
